import React, { useState } from 'react';
import { Card, Typography, Switch, Space } from 'antd';
import AnimatedList from './AnimatedList';
import { useThemeStore } from '../../stores/themeStore';

const { Title, Text } = Typography;

const AnimatedListDemo: React.FC = () => {
  const { mode } = useThemeStore();
  const [selectedItem, setSelectedItem] = useState<string | number>('');
  const [showGradients, setShowGradients] = useState(true);
  const [hideScrollbar, setHideScrollbar] = useState(false);

  // 示例数据
  const sampleItems = [
    {
      id: 1,
      content: (
        <div>
          <Title level={4} style={{ margin: 0, color: mode === 'dark' ? '#fff' : '#000' }}>
            项目 1
          </Title>
          <Text style={{ color: mode === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)' }}>
            这是第一个项目的描述信息
          </Text>
        </div>
      )
    },
    {
      id: 2,
      content: (
        <div>
          <Title level={4} style={{ margin: 0, color: mode === 'dark' ? '#fff' : '#000' }}>
            项目 2
          </Title>
          <Text style={{ color: mode === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)' }}>
            这是第二个项目的描述信息
          </Text>
        </div>
      )
    },
    {
      id: 3,
      content: (
        <div>
          <Title level={4} style={{ margin: 0, color: mode === 'dark' ? '#fff' : '#000' }}>
            项目 3
          </Title>
          <Text style={{ color: mode === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)' }}>
            这是第三个项目的描述信息
          </Text>
        </div>
      )
    },
    {
      id: 4,
      content: (
        <div>
          <Title level={4} style={{ margin: 0, color: mode === 'dark' ? '#fff' : '#000' }}>
            项目 4
          </Title>
          <Text style={{ color: mode === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)' }}>
            这是第四个项目的描述信息
          </Text>
        </div>
      )
    },
    {
      id: 5,
      content: (
        <div>
          <Title level={4} style={{ margin: 0, color: mode === 'dark' ? '#fff' : '#000' }}>
            项目 5
          </Title>
          <Text style={{ color: mode === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)' }}>
            这是第五个项目的描述信息
          </Text>
        </div>
      )
    },
    {
      id: 6,
      content: (
        <div>
          <Title level={4} style={{ margin: 0, color: mode === 'dark' ? '#fff' : '#000' }}>
            项目 6
          </Title>
          <Text style={{ color: mode === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)' }}>
            这是第六个项目的描述信息
          </Text>
        </div>
      )
    },
    {
      id: 7,
      content: (
        <div>
          <Title level={4} style={{ margin: 0, color: mode === 'dark' ? '#fff' : '#000' }}>
            项目 7
          </Title>
          <Text style={{ color: mode === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)' }}>
            这是第七个项目的描述信息
          </Text>
        </div>
      )
    },
    {
      id: 8,
      content: (
        <div>
          <Title level={4} style={{ margin: 0, color: mode === 'dark' ? '#fff' : '#000' }}>
            项目 8
          </Title>
          <Text style={{ color: mode === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)' }}>
            这是第八个项目的描述信息
          </Text>
        </div>
      )
    }
  ];

  const handleSelect = (item: any) => {
    setSelectedItem(item.id);
  };

  return (
    <div style={{ 
      padding: '24px', 
      background: mode === 'dark' ? '#1a1a1a' : '#f0f2f5',
      minHeight: '100vh'
    }}>
      <Card 
        title="AnimatedList 组件演示"
        style={{ 
          marginBottom: '24px',
          background: mode === 'dark' ? 'rgba(30, 30, 30, 0.8)' : '#ffffff',
          border: mode === 'dark' ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid #e0e0e0'
        }}
      >
        <Space direction="vertical" style={{ width: '100%' }}>
          <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
            <Space>
              <Text>显示渐变:</Text>
              <Switch 
                checked={showGradients} 
                onChange={setShowGradients} 
              />
            </Space>
            <Space>
              <Text>隐藏滚动条:</Text>
              <Switch 
                checked={hideScrollbar} 
                onChange={setHideScrollbar} 
              />
            </Space>
          </div>
          
          <Text type="secondary">
            {selectedItem ? `当前选中项目: ${selectedItem}` : '点击项目进行选择'}
          </Text>
        </Space>
      </Card>

      <Card
        style={{
          background: mode === 'dark' ? 'rgba(30, 30, 30, 0.8)' : '#ffffff',
          border: mode === 'dark' ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid #e0e0e0'
        }}
      >
        <AnimatedList
          items={sampleItems}
          onSelect={handleSelect}
          selectedItem={selectedItem}
          showGradients={showGradients}
          hideScrollbar={hideScrollbar}
          containerWidth={600}
          maxHeight={400}
        />
      </Card>
    </div>
  );
};

export default AnimatedListDemo;